<!doctype html>
<!DOCTYPE html>
<html ondragstart="return false" onselectstart="return false" manifest = "cache.manifest">
    <head>
        <meta charset="UTF-8" />
        <title>3D档案库</title>
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>

        <div id="all">
            <!--主屏显示-->
            <div id="main">
                <!--所有li模块-->
                <div id="list">
                    <ul></ul>
                </div>

                <!--左下角按钮-->
                <div id="btn">
                    <ul>
						<li id="gridBtn">Grid</li>
						<li id="helixBtn">Helix</li>
						<li id="SphereBtn">Sphere</li>
						<li id="" onclick="fullScreen()">fullScreen</li>
						<li id="" onclick="exitScreen()">exitScreen</li>
						<li onclick="triggar()">trigger</li>
						<li onclick="update()">update</li>
						<li onclick="back()">back</li>
						<li onclick="changeBg()">changeBg</li>
                    </ul>
                </div>
            </div>
		</div>
		
		<div id="alert_box">

			
		</div>
    </body>
    <script src="js/data.js"></script>
    <script>
		var radius = document.getElementById("main").clientWidth
		var screen_width = document.getElementById("main").clientWidth
		var screen_height = document.getElementById("main").clientHeight
		var update,back,rotate_scene
		var current_mode = 'Grid'	// Grid Helix Sphere
		var img_list = [
			{
				src:"img/1.jpg",
				has_icon:true,
				icon:"img/icon/1.png"
			},
			{
				src:"img/2.png",
				has_icon:false,
			},
			{
				src:"img/3.jpg",
				has_icon:true,
				icon:"img/icon/2.png"
			},
			{
				src:"img/4.jpg",
				has_icon:false,
			},
			{
				src:"img/5.png",
				has_icon:true,
				icon:"img/icon/3.png"
			},
			{
				src:"img/6.png",
				has_icon:true,
				icon:"img/icon/4.png"
			}
		]
		var is_rotate = true
		var ainimate_timer
		var alert_box = document.getElementById("alert_box")
		function close_alert(){
			alert_box.style.width = "0"
			alert_box.style.height = "0"
			alert_box.style.top = "50%"
			alert_box.style.left = "50%"
			alert_box.style.border  =""
		}
		
		function triggar(){
				if(is_rotate){
					cancelAnimationFrame(ainimate_timer)
					is_rotate = !is_rotate
				}else{
					rotate_scene()
					is_rotate = !is_rotate
				}
			}

		/*------model object init------*/
	
		var oImg = new Image()
		oImg.src = "img/1.jpg"
		oImg.onload = function(){
			var oUL = document.getElementById('list').children[0]
			while(oImg.width > radius/5){
				oImg.width = oImg.width / 1.3
				oImg.height = oImg.height / 1.3
			}
		
			oUL.style.width = oImg.width + "px"
			oUL.style.height = oImg.height + "px"

			function Magic(){
				this.liNum = 125;
				this.oUl = document.getElementById('list').children[0];
				this.aLi = this.oUl.children;
				this.disX = screen_width / 4
				this.disY = screen_height / 4
				this.disZ = radius/4
				this.oUlZ = -radius*1.3;
				this.rotateX = 0;
				this.rotateY = 0;
			}
			
			Magic.prototype.init = function(){//创建li元素
				var fragment = document.createDocumentFragment();//使用文档片段 轻量级
				for(var i=0;i<this.liNum;i++){
					var oLi = document.createElement('li');
					
					var index = Math.floor(Math.random() * img_list.length)
					var img_src = img_list[ index ].src
					oLi.style.backgroundImage = `url('${ img_src }')`
					oLi.style.backgroundSize = "100% 100%"
					oLi._my_info = {
						index:index
					}
					if(img_list[ index ].has_icon){
						oLi.innerHTML = `<img style='position: absolute;top:0;left:5%;' src='${ img_list[ index ].icon }' />`
					}

					fragment.appendChild(oLi);
				}
				this.oUl.appendChild(fragment);//避免直接的DOM插入
				
			}
			
			Magic.prototype.grid = function(){
				
				for(var i = 0;i < this.liNum;i++){
					this.aLi[i].index = i;	// 保存排序
					this.aLi[i].x = i % 5;	// 确定元素的位置(排列位置)
					this.aLi[i].y = ~~(i % 25 / 5);
					this.aLi[i].z = 4 - ~~(i / 25);
					this.aLi[i].pox = (this.aLi[i].x - 2)*this.disX*1.5 - oImg.width/2,//设置元素的位置（空间位置）
					this.aLi[i].poy = (this.aLi[i].y - 2)*this.disY*1.5,
					this.aLi[i].poz = (this.aLi[i].z - 3)*this.disZ*1.5 + 500;
					this.aLi[i].style.transform = "translate3D("+this.aLi[i].pox+"px,"+this.aLi[i].poy+"px,"+this.aLi[i].poz+"px)";
				}
			}
			
			Magic.prototype.helix = function(){
			
				magic.rotateX = 0
				magic.rotateY = 0
				
				for(var i = 0;i < this.liNum;i++){
					this.aLi[i].pox = 0
					if(i < 25){
						this.aLi[i].poy = oImg.height*2 + 40
					}else if(i < 50){
						this.aLi[i].poy = oImg.height + 20
					}else if(i < 75){
						this.aLi[i].poy = 0
					}else if(i < 100){
						this.aLi[i].poy = -oImg.height - 20
					}else{
						this.aLi[i].poy = -oImg.height*2 - 40
					}

					this.aLi[i].rotateY = i*(360/25)

					this.aLi[i].style.transform = `rotateY(${this.aLi[i].rotateY}deg) translate3D(${this.aLi[i].pox}px,${this.aLi[i].poy}px,${radius*1.1}px)`
				}
			}
			
			Magic.prototype.sphere = function(){
				var sphere_r = radius
				for(var i = 0;i < this.liNum;i++){
					this.aLi[i].pox = 0
					this.aLi[i].poy = 0
					this.aLi[i].rotateY = 0
					this.aLi[i].rotateX = 0
					if(i < 17){
						this.aLi[i].poy = oImg.height*2
						this.aLi[i].rotateX = 65
						this.aLi[i].rotateY = i*(360/17)
					}else if(i < 45){
						this.aLi[i].poy = oImg.height
						this.aLi[i].rotateX = 35
						this.aLi[i].rotateY = i*(360/28)
					}else if(i < 80){
						this.aLi[i].poy = 0
						this.aLi[i].rotateX = 0
						this.aLi[i].rotateY = i*(360/35)
					}else if(i < 108){
						this.aLi[i].poy = -oImg.height
						this.aLi[i].rotateX = -35
						this.aLi[i].rotateY = i*(360/28)
					}else{
						this.aLi[i].poy = -oImg.height*2
						this.aLi[i].rotateX = -65
						this.aLi[i].rotateY = i*(360/17)
					}
					this.aLi[i].style.transform = "rotateY("+this.aLi[i].rotateY+"deg) rotateX("+this.aLi[i].rotateX+"deg)"+
					"translate3D("+this.aLi[i].pox+"px,"+this.aLi[i].poy+"px,"+sphere_r+"px)";
					
					// this.aLi[i].pox = 0;
					// this.aLi[i].poy = ~~(i%25/5)*200-600;
					// this.aLi[i].poz = 1000;
					// this.aLi[i].rotateY = 4.1*i*(360/125);//360/25
					// this.aLi[i].rotateX = ~~(i%25/5)*36-80;//绕X轴转的度数
					// this.aLi[i].style.transform = "rotateY("+this.aLi[i].rotateY+"deg) rotateX("+this.aLi[i].rotateX+"deg)"+
					// "translate3D("+this.aLi[i].pox+"px,"+this.aLi[i].poy+"px,1000px)";
				}
			}
			
			document.addEventListener('mousewheel',function(event){
				// console.log(magic.oUlZ)
				if(magic.oUlZ < -3000){
					magic.oUlZ = -2999
					return
				}else if(magic.oUlZ > 800){
					magic.oUlZ = 799
					return
				}
				if (!event) event = window.event;
				var delta = 0;
			
				if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
					delta = event.wheelDelta/120; 
					if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
				} else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
					delta = -event.detail/3;
				}
				magic.oUlZ -= delta*400;
				magic.oUl.style.transform = "translate3D(0px,0px," + magic.oUlZ+ "px) rotateX("+magic.rotateX+ "deg) rotateY("+magic.rotateY+"deg)";
			})//end of mousewheel
			
			document.onmousedown=function(event){
				var rotate_deg = 25
				if(current_mode === "Helix"){
					rotate_deg = 5
				}

				if (!event) event = window.event;
				var x = event.clientX,
					y = event.clientY,
					cutX = x,
					cutY = y;
				document.onmousemove = function(event){
					if (!event) event = window.event;
					cutX = event.clientX - x;
					cutY = event.clientY - y;
					magic.rotateX += -cutY*.02;
					if(magic.rotateX > rotate_deg){
						magic.rotateX -= -cutY*.02
					}else if(magic.rotateX < -rotate_deg){
						magic.rotateX -= -cutY*.02
					}
					magic.rotateY += cutX*.005;
					magic.oUl.style.transform = "translate3D(0px,0px,"+magic.oUlZ+
												"px) rotateX("+magic.rotateX+
												"deg) rotateY("+magic.rotateY+"deg)";
				}
				document.onmouseup = function(){
					document.onmousemove = null;
				}	
			}//end of document.onmousedown

			document.ontouchstart = function(event){
				var rotate_deg = 25
				if(current_mode === "Helix"){
					rotate_deg = 5
				}
				if (!event) event = window.event;
				var x = event.changedTouches[0].clientX,
					y = event.changedTouches[0].clientY,
					cutX = x,
					cuty= y;
				document.ontouchmove = function(event){
					if (!event) event = window.event;
					cutX = event.changedTouches[0].clientX - x;
					cutY = event.changedTouches[0].clientY - y;
					magic.rotateX += -cutY*.02;
					if(magic.rotateX > rotate_deg){
						magic.rotateX -= -cutY*.02
					}else if(magic.rotateX < -rotate_deg){
						magic.rotateX -= -cutY*.02
					}
					magic.rotateY += cutX*.005;
					magic.oUl.style.transform = "translate3D(0px,0px,"+magic.oUlZ+
												"px) rotateX("+magic.rotateX+
												"deg) rotateY("+magic.rotateY+"deg)";
				}
				document.ontouchend = function(){
					document.ontouchmove = null
				}
			}

			var magic = new Magic();

			magic.init();//创建li元素
			magic.grid();//默认为grid模式

			var gridBtn = document.getElementById('gridBtn'),
				helixBtn = document.getElementById('helixBtn'),
				SphereBtn = document.getElementById('SphereBtn');
			
			gridBtn.onclick = function(){
				current_mode = "Grid"
				magic.grid()
				set_backface_visiable()
			}
			helixBtn.onclick = function(){
				current_mode = "Helix"
				magic.helix()
				set_backface_unvisiablb()
			}
			SphereBtn.onclick = function(){
				current_mode = "Sphere"
				magic.sphere()
				set_backface_visiable()
			}
			
			magic.oUl.onmouseup = function(e){
				
				if(e){
					// target_info
					var target_info = e.target._my_info
					console.log(target_info)
					// alert_box show
					alert_box.style.width = "80%"
					alert_box.style.height = "80%"
					alert_box.style.top = "10%"
					alert_box.style.left = "10%"
					alert_box.style.border = "1px solid #70caff"
					// alert_box content
					alert_box.innerHTML = `
						<img src="${ e.target.style.backgroundImage.split('"')[1] }"/>
						
						<p>${ flyData[e.target.index].author }</P>
						<p>${ flyData[e.target.index].time }</P>
						<div id="btn">
							<ul>
								<li class="close" onclick="close_alert()">close</li>
							</ul>
						</div>
					`
				}
			}
			// animate
			
			rotate_scene = function(){
				
				magic.rotateY += 0.09
				magic.oUl.style.transform = "translate3D(0px,0px,"+magic.oUlZ+
												"px) rotateX("+magic.rotateX+
												"deg) rotateY("+magic.rotateY+"deg)";
				ainimate_timer = requestAnimationFrame(rotate_scene)
			} 
			rotate_scene()
			
			function set_backface_visiable(){
				var list = document.querySelectorAll("#list li")
				list.forEach(function(element){
					element.style.backfaceVisibility = "visible"
				})
			}

			function set_backface_unvisiablb(){
				var list = document.querySelectorAll("#list li")
				list.forEach(function(element){
					element.style.backfaceVisibility = "hidden"
				})
			}
		
			update = function(){
				for(var i = 0;i < magic.aLi.length;i++){
					magic.aLi[i].style.backgroundImage = `url(img/2.png)`
				}
			}

			back = function(){
				for(var i = 0;i < magic.aLi.length;i++){
					var index = Math.floor(Math.random() * img_list.length)
					// var img_src = img_list[ index ]
					magic.aLi[i].style.backgroundImage = `url('${img_list[index].src}')`
				}
			}

		}

		//全屏
		function fullScreen(){
				var el = document.documentElement;
				var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;      
					if(typeof rfs != "undefined" && rfs) {
						rfs.call(el);
					};
				return;
			}
		//退出全屏
		function exitScreen(){
				if (document.exitFullscreen) {  
					document.exitFullscreen();  
				}  
				else if (document.mozCancelFullScreen) {  
					document.mozCancelFullScreen();  
				}  
				else if (document.webkitCancelFullScreen) {  
					document.webkitCancelFullScreen();  
				}  
				else if (document.msExitFullscreen) {  
					document.msExitFullscreen();  
				} 
				if(typeof cfs != "undefined" && cfs) {
					cfs.call(el);
				}
			}
		
		// 改变背景图片
		var bg_imgs = [
			'img/bg.jpg',
			'img/bg2.jpg',
			'img/bg3.jpg',
			'img/bg4.jpg',
			'img/bg5.jpg'
		]
		var bg_img_index = 0
		function changeBg(){
			bg_img_index++
			if(bg_img_index > bg_imgs.length - 1){bg_img_index = 0}
			var bg = document.getElementById('main')
			bg.style.backgroundImage = `url(${ bg_imgs[bg_img_index] })`
		}

	
	</script>
</html>














